<template>
  <div>
    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>二次验证</span>
      </ul>
    </el-row>

    <div>
      <table class="myTable">
        <thead>
        <tr>
          <th colspan="2">个人二次验证</th>
        </tr>
        </thead>
        <tbody v-if="isUseTfa">
        <tr>
          <td class="deepColor textRight">
            二次验证码
          </td>
          <td class="textLeft">
              <span style="color: #62bd12;">
                 已启动
              </span>
            <button @click="resetTfa">
              重置
            </button>
          </td>
        </tr>
        </tbody>
        <tbody v-else>
        <tr>
          <td class="deepColor textRight">
            用途
          </td>
          <td class="textLeft">
            通过二次验证（也称为双重身份验证），您可以为自己的帐号添加一道额外的安全保障。在完成设置后，您将使用以下对象通过两个步骤登录帐号：
            <br/>
            您的密码
            <br/>
            您设备上安装的Google认证器为您生成的二次验证码
          </td>
        </tr>
        <tr>
          <td class="deepColor textRight">
            步骤
          </td>
          <td class="colorRed textLeft">
            1.下载安装Google认证器 （Google Authenticator）客户端。
            <br/>
            目前客户端有:	<button @click="showPopup('android')" class="colorBlue">android版</button> | <button @click="showPopup('ios')" class="colorBlue">iOS版</button>
            <br/>
            2.然后选择“扫描条形码”
            <div @click="hidePopup" class="popup" :style="popupVisible?'display:block':''">
              <img :src="popupImgSrc">
            </div>
            <div @click="hidePopup" class="popupmodel" :style="popupVisible?'display:block':''">

            </div>
          </td>
        </tr>
        <tr>
          <td class="deepColor textRight">
            二维码
          </td>
          <td class="colorRed textCenter">
            <br/>
            3. 扫描以下二维码，再输入下方二次验证码完成认证。
            <br/>
            <div>
              <img :src="imgSrc">
            </div>
          </td>
        </tr>
        <tr>
          <td class="deepColor textRight">
            二次验证码
          </td>
          <td class="textLeft">
            <input type="number" v-model="secCode" min="0">
          </td>
        </tr>
        <tr>
          <td class="deepColor textRight">

          </td>
          <td class="colorRed textLeft">
            4.二次验证启用后，这时您也可以看到刚添加的二次验证已经出现在Google认证器里了。
            <br/>
            之后登录需要输入二次验证码的时候，打开Google认证器，把对应的验证码添到登录页面进行验证就可以了。
          </td>
        </tr>
        </tbody>
      </table>

      <el-row class="bottom" v-if="!isUseTfa">
        <button class="bottomBtn" @click="saveTfa">
          确认
        </button>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SecVer',
    inject: ['reload'],
    data() {
      return {
        secCode: 0,
        popupVisible: false,
        isUseTfa: false,
        imgSrc: '',
        secret: '',
        popupImgSrc: '',
      }
    },
    created() {
      this.$store.dispatch('GetUseTfa')
        .then(response => {
          if (response === 1) {
            this.isUseTfa = true
          } else {
            this.$store.dispatch('GetGenTfa')
              .then(response_genTfa => {
                this.imgSrc = response_genTfa.img
                this.secret = response_genTfa.secret
              })
          }
        })
    },
    methods: {
      saveTfa() {
        if (window.confirm('是否确定密码？')) {
          this.$store.dispatch('GetSaveTfacode', { secret: this.secret, tfacode: this.secCode })
            .then(response => {
              if (window.confirm(response.message)) {
                this.reload()
                return true
              }
            })
          return true
        } else {
          return false
        }
      },
      resetTfa() {
        this.$store.dispatch('GetResetTfa')
          .then(response => {
            if (response.status) {
              if (window.confirm('成功重置二次验证码!')) {
                this.reload()
                return true
              }
            } else {
              alert(response.message)
            }
          })
      },
      showPopup(value) {
        if (value === 'android') {
          this.popupImgSrc = '/static/agent/img/android.png'
        } else {
          this.popupImgSrc = '/static/agent/img/ios.png'
        }
        this.popupVisible = true
      },
      hidePopup() {
        this.popupVisible = false
      },
    },
  }
</script>

<style scoped>
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }

  .myTable{
    width: 50%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px auto;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
  .deepColor{
    background-color: #F2F2F2;
  }
  .colorRed{
    color:red !important;
    font-weight: bold !important;
  }
  .colorBlue{
    color:blue!important;
    border:none;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
  }
  .colorBlue:hover{
    text-decoration: underline;
  }
  .textRight{
    text-align: right;
    width: 25%;
  }
  .textLeft{
    text-align: left;
  }
  .textCenter{
    text-align: center;
  }
  .popupmodel{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #CCC;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    z-index: 98;
  }
  .popup{
    display: none;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99;
  }
  .bottom{
    text-align: center;
  }
  .bottomBtn{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    background: url(/static/agent/img/nav_bu.png) repeat-x left -134px;
    border: 0px;
  }
  .bottomBtn:hover{
    color: #fff100;
    background: url(/static/agent/img/nav_bu.png) repeat-x left -165px;
  }
</style>
